<template>
	<view class="main-body">
		<form @submit="formSubmit">
			<view class="input-flex">
				<view class="input-flex-label">主题</view>
				<input type="text" name="title" v-model="title" class="input-flex-text" />
			</view>
			<view class="input-flex">
				<view class="input-flex-label">来源</view>
				<input type="text" name="laiyuan" v-model="laiyuan" class="input-flex-text" />
			</view>
			<view class="textarea-flex">
				<view class="input-flex-label flex-1">内容</view>
				<textarea name="content" v-model="content" class="h100 textarea-flex-text"></textarea>
			</view>
			<view class="tui-upload-box">
				<view class="tui-upload-item" v-for="(item,index) in files" :key="index">
					<image :src="item" class='tui-upload-img' @tap="previewImage" mode="aspectFill" :id="item"></image>
					<tui-icon color="#ed3f14" :size="24" name="close-fill" class="tui-upload-del" :index="index" @click="deleteImage"></tui-icon>
				</view>
				<view class="tui-upload-item tui-upload-add" v-if="files.length < 9" hover-class="tui-opcity" :hover-stay-time="150"
				 @tap="chooseImage">
					<text>+</text>
				</view>
			</view>
			<view class="submit-box"><button formType="submit" class="tui-btn">提交</button></view>
		</form>
	</view>
</template>

<script>
	const form = require("../../components/utils/formValidation.js")
	import tuiIcon from "@/components/icon/icon"
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';
	
	export default {
		components: {
			tuiIcon
		},
		data: function() {
			return {
				title: '',
				content: '',
				files: [],
				laiyuan: '',
				biaoqian: [1]
			}

		},
		onLoad: function(option) {
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
		},
		onReady: function() {
			// uni.setNavigationBarTitle({
			// 	title: "发布帖子",
			// })
		},
		methods: {
			formSubmit: function(e) {
				let rules = [{
					name: "title",
					rule: ["required"],
					msg: ["请输入标题"]
				}, {
					name: "content",
					rule: ["required"], 
					msg: ["请输入内容"]
				},{
					name: "laiyuan",
					rule: ["required"], 
					msg: ["请输入来源"]
				}]; // 
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				
				console.log(formData,checkRes);
				let userId = uni.getStorageSync('userInfo').userId;
				let data = {
					articleConent: this.content,
					image: this.files,
					title: this.title,
					laiyuan: this.laiyuan,
					userId : userId,
					biaoqian: this.biaoqian
				}
				
				if(!checkRes){
					
					// 替换文件名.
					for (var i = 0; i < this.files.length; i++) {
						this.files[i] = uploadImage(this.files[i], `luntan/${this.$xinli.user.getUserId()}/${this.$utils.Random.getTime()}.png`);
					}
					// 
					console.log(data)
					this.$api.articleUplod(data);
					// 
					uni.switchTab({
						url: './forumPage'
					})
					
				}else {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
			},
			chooseImage: function(e) {
				let that = this;
				if (that.files.length >= 9) {
					this.tui.toast("最多上传9张图片");
					return
				}
				uni.chooseImage({
					count: 9 - that.files.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						that.files = that.files.concat(res.tempFilePaths);
						console.log(that.files);
						//上传功能已去除
						//...
					}
				})
			},
			previewImage: function(e) {
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: this.files // 需要预览的图片http链接列表
				})
			},
			deleteImage: function(e) {
				const index = e.index;
				this.files.splice(index, 1);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tags{
		padding: 0 40upx;
		background: #fff;
	}
	.input-flex {
		display: flex;
		flex-direction: row;
		margin-bottom: 1px;
		padding: 24upx;
		background-color: #fff;
	}

	.input-flex-label {
		width: 100upx;
		line-height: 86.4upx;
		font-size: 38.4upx;
		color: #333;
		display: block;
	}

	.input-flex-require {
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
		font-family: iconfont;

	}

	.input-flex-require:after {
		content: "\e60d";
		color: red;
		position: absolute;
		left: -24upx;
		font-size: 28.8upx;
		transform: scale(0.5);
	}

	.input-flex-txt {
		flex: 1;
		line-height: 86.4upx;
		color: #646464;
	}

	.input-flex-text,
	.input-flex-select {
		flex: 1;
		height: 86.4upx;
		box-sizing: border-box;
		display: block;
		border: 1px solid #eee !important;
		padding: 0 24upx;
		font-size: 33.6upx;
		margin: 0;
		border-radius: 12upx;
		width: 240upx;
	}

	.input-flex-select {
		-webkit-appearance: menulist-button;
		background-color: #fff;
		color: #323232;
	}

	.input-flex-note {
		margin-left: 7.2upx;
		color: #666;
		justify-content: center;
	}

	.input-flex-btn {
		width: 240upx;
		height: 86.4upx;
		line-height: 86.4upx;
		background-color: #007bff;
		box-sizing: border-box;
		border-top-right-radius: 24upx;
		border-bottom-right-radius: 24upx;
		margin-left: -12upx;
		color: #fff;
		font-size: 33.6upx;
		text-align: center;
		cursor: pointer;
	}

	/**textarea**/
	.textarea-flex {
		padding: 24upx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin-bottom: 12upx;
	}

	.textarea-flex-label {
		margin-bottom: 24upx;
		color: #323232;
	}

	.textarea-flex-text {
		height: 300upx;
		width: 100%;
		border: 1px solid #eee;
		border-radius: 12upx;
		padding: 24upx;
		box-sizing: border-box;
	}

	.submit-box {
		padding: 0 30upx;
	}

	.tui-btn {
		background-color: #df5451;
		color: #fff;
	}

	.tui-upload-box {
		padding-left: 30upx
	}
</style>
